<template>
  <!-- 登录页面 -->
  <div class="login_styl">
    <div class="login_top">
      <div>
        <img @click="$router.push('/')" class="img_styl" src="@/assets/images/fronLogo.png" alt="" srcset="">
        <img class="img_styl1" src="@/assets/images/login_title.png" alt="" srcset="">
      </div>
      <div class="login_title">欢迎来到振华石油商城！</div>
    </div>
    <div class="login_bottom">
      <img src="@/assets/images/login_left.png" alt="">
      <div class="login_input">
        <div class="login_name">用户登录</div>
        <div class="account_styl">
          <div class="account_font">账号</div>
          <Input v-model="loginInfo.userName" type="text" placeholder="请输入账号">
          </Input>
        </div>
        <div class="account_styl password_styl">
          <div class="account_font">密码</div>
          <Input v-model="loginInfo.password" type="password" placeholder="请输入密码" @on-keyup.enter="loginFun()">
          </Input>
        </div>
        <div class="remember_styl">
          <Checkbox v-model="remember">记住密码</Checkbox>
          <!-- <a href="javaScript:;" @click="$refs.ChangePassword.MD_openFun()">忘记密码</a> -->

        </div>
        <div class="btn_styl" @click="loginFun()">立即登录
          <Spin size="large" fix v-if="btnLoading" />
        </div>
        <div class="login_bottom">
          没有账号？ <a @click="goRegisterFun">去注册</a>
        </div>
      </div>
    </div>

    <!-- 选择账号登录 -->
    <ChooseAccount ref="ChooseAccount" :companyList="companyList" @chooseData="loginFun"></ChooseAccount>
    <!-- 填写用户详细信息 -->
    <Register2 ref="Register2"></Register2>
    <!-- 忘记密码 -->
    <ChangePassword ref="ChangePassword"></ChangePassword>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";
import ChooseAccount from "./ChooseAccount";
import Register2 from "./Register2";
import ChangePassword from "./changePassword.vue";

export default {
  components: { ChooseAccount, Register2,ChangePassword },
  data() {
    return {
      loginInfo: {
        userName: "",
        password: ""
      },
      companyList: [],
      btnLoading: false,
      remember: false
    };
  },
  computed: {
    ...mapGetters(["store_token", "store_userInfo", "store_loginInfo"])
  },
  mounted() {
    if (!!this.store_loginInfo.userName) {
      this.remember = true;
      this.loginInfo = this.store_loginInfo;
    } else {
      this.remember = false;
    }
  },
  methods: {
    ...mapMutations(["set_token", "set_userInfo", "set_loginInfo"]),

    loginFun(userId = "") {
      this.btnLoading = true;
      let data = {
        ...this.loginInfo,
        clientId: "1366196240489459714",
        userId: userId
      };
      this.httpPost(this.API.API_login, data)
        .then((res) => {
          console.log("登陆结果++++", res.data);
          console.log("公司列表", !!res.data.data);
          if (res.code == "00000") {
            this.$Message.success("登录成功!");
            this.set_token(res.data.token);
            this.set_userInfo(res.data.customer);
            this.$refs.ChooseAccount.cancelFun();
            // 储存密码
            if (this.remember) {
              this.set_loginInfo(this.loginInfo);
            } else {
              this.set_loginInfo({
                userName: "",
                password: ""
              });
            }
            // 拦截详细信息未填写
            if (!this.store_userInfo.entName) {
              this.btnLoading = false;
              this.$refs.Register2.openFun();
              return;
            }
            this.$router.push("/");
          } else if (!!res.data.data) {
            this.companyList = res.data.data;
            this.$refs.ChooseAccount.openFun();
          } else {
            this.$Message.error(res.data.msg);
          }
          this.btnLoading = false;
        })
        .catch((err) => {
          this.btnLoading = false;
          console.log("接口报错：", err);
        });
    },
    goRegisterFun(item) {
      this.$router.push("/register");
    }
  }
};
</script>
<style lang="less" scoped>
@import "~@/assets/styles/main.less";
@deep: ~">>>";

.login_styl {
  .flex-y();
  height: 100vh;
  min-width: 1200px;

  .login_top {
    background-image: url("~@/assets/images/login_back.png");
    .flex-x();
    width: 100%;
    height: 108px;
    padding: 0 380px;
    border-bottom: 2px solid @themeColor;
    background-color: #ffffff;

    .img_styl {
      margin-right: 38px;
      height: 80px;
      cursor: pointer;
    }

    .img_styl1 {
    }

    .login_title {
      flex-shrink: 0;
      font-size: 16px;
    }
  }

  .login_bottom {
    background-image: url("~@/assets/images/login_bottom.png");
    .flex-x(center);
    width: 100%;
    height: 100%;
    flex-grow: 1;

    .login_input {
      position: relative;
      .flex-y(flex-start);
      width: 482px;
      height: 464px;
      margin-left: 126px;
      box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2);
      background-color: #ffffff;

      .login_name {
        margin: 40px 0 30px 0;
        font-size: 24px;
        color: @themeColor;
      }

      .account_styl {
        width: 392px;

        .account_font {
          margin-bottom: 10px;
          text-align: left;
        }
      }

      .password_styl {
        margin-top: 18px;
      }

      .remember_styl {
        width: 392px;
        margin: 10px 0 44px 0;
        text-align: left;
        display: flex;
        justify-content: space-between;
      }

      .btn_styl {
        position: relative;
        .solid-btn(392px, 36px, 4px, @themeColor);
      }

      .login_bottom {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 53px;
        font-size: 12px;
        background-color: #f8f9fd;
      }
    }
  }
}
</style>
